<!DOCTYPE html>
<html>
<head>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/plugins/gridster/jquery.gridster.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-combobox.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-popup.css">

<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/plugins/gridster/jquery.gridster.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-combobox.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-popup.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-modal.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-dialog.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-button.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>

<style>
	
	
</style>
<script type="text/javascript">
var gridster;
$(function () {
    gridster = $("#simpleGrid").gridster({    //通过jquery选择DOM实现gridster
        widget_base_dimensions: [100, 100],    //模块的宽高 [宽,高]
        widget_margins: [5, 5],    //模块的间距 [上下,左右]
        avoid_overlapped_widgets: true,    //设置为true，不允许模块叠加
        resize:{enabled: true },        //默认false，设置为true时表示可以拖动模块的右下角改变模块大小
        draggable: {
          handle: '.dragable'    //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
        }
    }).data('gridster');
    gridster.add_widget('<div class="dragable"><div id="simpleButton"></div></div>', 1, 1, 1, 1 );
    gridster.add_widget('<div class="dragable"><div id="singlePopup"></div></div>', 2, 1, 2, 1 );
    gridster.add_widget('<div class="dragable"><div id="simpleCombobox"></div></div>', 1, 1, 5, 1 );
    gridster.add_widget('<div class="dragable"><div id="multiPopup"></div></div>', 3, 1, 9, 1 );
    
	$("#simpleCombobox").BootstrapCombobox({
		data: [
		       {value: 10000, text: "测试1"},
		       {value: 20000, text: "测试2"},
		       {value: 30000, text: "测试3"},
		    ]
	});
	
    $("#singlePopup").BootstrapPopup({
    	readonly: true,
    	header: '人员选择',
    	valueField: 'loginName',
    	textField: 'userName',
    	editor: {
    		type: 'table',
    		options: {
    			columns: [
  						{display : '登录名', name: 'loginName'},
  						{display : '姓名', name: 'userName'},
  						{display : '电话', name: 'userPhone'},
  						{display : '移动电话', name: 'userMPhome'},
  						{display : '电子邮箱', name: 'userEmail'},
    			],
 				url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserList',		
 				usePager: false
    		}
    	},    	
    });	

    $("#multiPopup").BootstrapPopup({
    	readonly: true,
    	multiMode: true,
    	header: '人员选择',
    	valueField: 'loginName',
    	textField: 'userName',
    	editor: {
    		type: 'table',
    		options: {
    			columns: [
  						{display : '登录名', name: 'loginName'},
  						{display : '姓名', name: 'userName'},
  						{display : '电话', name: 'userPhone'},
  						{display : '移动电话', name: 'userMPhome'},
  						{display : '电子邮箱', name: 'userEmail'},
    			],
 				url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserList',		
 				usePager: false
    		}
    	},    	
    });    
    
    
    $("#simpleButton").BootstrapButton({
    	text: '获取数据',
    	type: 'link',
    	icon: 'edit',
    	onClick: function(){
    		var obj = gridster.serialize();
    		alert(JSON.stringify(obj));
    	}
    });
    

});

</script>
</head>

<body>

	<div class="container">  
		<nav id="menu"></nav>
				
		<div class="panel panel-default">
	        <div class="panel-heading">简单网格</div>
			<div class="panel-body">
			    <div>
                    <div id="simpleGrid" class="gridster"></div>
			    </div>
		     </div>
		     <div class="panel-footer">
		         
		     </div>
	    </div>  
    </div>    
</body>

</html>